<template>
  <div class="hot main-body">
    <div class="hot-title clearfix">
      <img src="@/assets/img/template-item2/icons/zhuangshileft.png" alt="">
      <h3>今日热点</h3>
      <img src="@/assets/img/template-item2/icons/zuangshiright.png" alt="">
    </div>
    <div class="hot-body clearfix">
      <div class="hot-body-left left">
        <div class="hot-body-left-top clearfix">
          <img class="left" src="../../../../assets/img/template-item2/banners/29.png" alt="">
          <div class="presentation left">
            <h4>复联4公映 全国各地影迷熬...</h4>
            <p>当地时间2019年4月23日，美国洛杉矶，电影当地时间2019年4月23日，
              美国洛杉矶，电影电影当地时杉矶，电影电影当地时...</p>
          </div>
        </div>
        <ul class="hot-body-left-bottom">
          <li>复联4公映 全国各地影迷熬夜看首映 全国各地影首映...</li>
          <li>复联4公映 全国各地影迷熬 全国各地影迷熬...</li>
          <li>漫威十大最强英雄排名 漫威英雄实力排行</li>
          <li>抖音震慑人心的纯音乐 纯音乐</li>
          <li>都市言情小说排行 好看的都市言情小说好看的都市言情小说</li>
        </ul>
      </div>
      <div class="hot-body-right right">
        <div class="hot-body-right-top clearfix">
          <div v-for="i in 3" :key="i" class="right-headline left">
            <img src="../../../../assets/img/template-item2/banners/hot1.png" alt="">
            <h4>复联4公映 全国各地影...</h4>
          </div>
        </div>
        <ul class="hot-body-right-bottom hot-body-left-bottom">
          <li>复联4公映 全国各地影迷熬 全国各地影迷熬...</li>
          <li>漫威十大最强英雄排名 漫威英雄实力排行</li>
          <li>抖音震慑人心的纯音乐 纯音乐</li>
          <li>都市言情小说排行 好看的都市言情小说好看的都市言情小说</li>
        </ul>
      </div>
    </div>
    <button>查看更多</button>
  </div>
</template>

<script>
export default {
  name: 'Hot',
  data() {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../../assets/template-item2/css/base";
.hot{
  @include btn;
  button{
    margin: 30px 547px;
  }
  .hot-title{
    @include panel;
  }
  .hot-body{
    margin-top: 40px;
    h4{
      font-size:17px;
      font-weight:bold;
      line-height:24px;
    }
    .hot-body-left-top{
      width: 460px;
      padding: 0px 0 32px 20px;
      border-bottom: 1px solid #cccccc;
      .presentation{
        width: 228px;
        height: 138px;
        margin: 11px 0 0 19px;
        p{
          font-size:14px;
          font-weight:normal;
          line-height:19px;
          margin-top: 12px;
        }
      }
    }
    .hot-body-left-bottom{
      margin-top: 26px;
      li{
        text-indent: 20px;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        font-size:16px;
        line-height:21px;
        margin-bottom: 16px;
        &:after {
            position: absolute;
            left: 0;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            display: block;
            content: '';
            width: 6px;
            height: 6px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            background-color: #b9b9b9;
        }
      }
      li:hover{
        color: #DC3535;
      }
      li:nth-child(1){
        font-size:18px;
        font-weight:bold;
        line-height:24px;
      }
    }
    .hot-body-right{
      .hot-body-right-top{
        .right-headline{
          margin-left: 20px;
          img{
            width: 206px;
            height: 154px;
            margin-bottom: 10px;
          }
        }
        .right-headline:nth-child(1){
          margin-left: 0px;
        }
      }
      .hot-body-right-bottom{
        margin-top: 54px;
      }
    }

  }

}
</style>
